<template>
  <div class="wrap">
    <!-- 搜索框 -->
    <div class="search">
      <form action="/">
        <van-search
          v-model.lazy="value"
          show-action
          placeholder="搜索游戏、用户、厂商和帖子"
          @cancel="onCancel"
          @focus="openlist"
          shape="round"
        />
      </form>

      <!-- 搜索选项列表 -->
      <ul id="gameslist">
        <li v-for="item in gamesList" :key="item.id" @click="goToDetail(item)">
          <span>{{ item.title }}</span>
        </li>
      </ul>

      <!-- 历史浏览 -->
      <ul id="historylist">
        <li>
          <span class="historysearch">历史搜索</span
          ><span @click="removeItem()" class="historyremove">清空</span>
        </li>
        <li
          v-for="value in historyList"
          :key="value.id"
          @click="goToDetail(value)"
        >
          <span><van-icon name="clock-o" />{{ value.title }}</span>
        </li>
      </ul>
    </div>

    <!-- 热门搜索 -->
    <div class="hot-search">
      <!-- 标题 -->
      <h3>热门搜索</h3>

      <!-- 热门搜索列表 -->
      <ul class="hot-search-list">
        <li>
          <router-link to="/details/10001"
            ><span>1</span>&nbsp;&nbsp;江湖悠悠</router-link
          >
        </li>
        <li>
          <router-link to="/details/10002"
            ><span>2</span>&nbsp;&nbsp;战双帕米什</router-link
          >
        </li>
        <li>
          <router-link to="/details/10003"
            ><span>3</span>&nbsp;&nbsp;香肠派对</router-link
          >
        </li>
        <li>
          <router-link to="/details/10004"
            ><span>4</span>&nbsp;&nbsp;原神</router-link
          >
        </li>
      </ul>

      <!-- 显示全部 -->
      <p class="allshow">显示全部</p>
    </div>

    <!-- 热门游戏标签 -->
    <div class="hot-games-icon">
      <!-- 标题 -->
      <h3>热门游戏标签</h3>

      <!-- 热门游戏标签列表 -->
      <ul class="hot-games-icon-list">
        <li><span>音游</span></li>
        <li><span>动作</span></li>
        <li><span>休闲</span></li>
        <li><span>策略</span></li>
        <li><span>模拟</span></li>
        <li><span>单机</span></li>
        <li><span>解密</span></li>
        <li><span>卡牌</span></li>
        <li><span>角色</span></li>
      </ul>
    </div>
  </div>
</template>

<script>
// import { Toast } from "vant";

export default {
  data() {
    return {
      value: "",
      gamesList: [],
      historyList: [],
    };
  },
  // 事件监听搜索引擎keyword传值
  watch: {
    value(to) {
      if (to !== "") {
        fetch("http://8.142.22.78:3000/api/home/search", {
          method: "POST",
          body: JSON.stringify({ keyword: this.value }),
          headers: new Headers({ "Content-Type": "application/json" }),
        })
          .then((response) => response.json())
          .then((res) => {
            this.gamesList = res.result;
            // console.log(res);
          });
      } else {
        this.gamesList = [];
      }
    },
  },
  mounted() {
    if (localStorage.getItem("history")) {
      this.historyList.push(...JSON.parse(localStorage.getItem("history")));
      //  console.log(this.historyList);
    }
  },
  methods: {
    // onSearch(item) {
    //   // Toast(val);
    //   this.$router.push("/details/" + item.id);
    // },
    onCancel() {
      // Toast("取消");
      this.$router.go(-1);
    },

    openlist() {
      var gameslist = document.getElementById("gameslist");
      gameslist.style.display = "block";
      // var historylist = document.getElementById("historylist");
      // historylist.style.display = "block";
    },
    // closelist() {
    //   var historylist = document.getElementById("historylist");
    //   historylist.style.display = "none";
    // },
    goToDetail(item) {
      // 页面跳转
      this.$router.push("/details/" + item.id);
      let obj = {
        title: item.title,
        id: item.id,
      };
      let arr = [];
      if (!localStorage.getItem("history")) {
        arr.push(obj);
        localStorage.setItem("history", JSON.stringify(arr));
      } else {
        let newarr = JSON.parse(localStorage.getItem("history"));
        let newarr1 = newarr.filter((item1) => {
          return item1.id === item.id;
        });
        if (newarr1.length === 0) {
          newarr.push(obj);
          localStorage.setItem("history", JSON.stringify(newarr));
        }
      }

      // console.log(item.id);
    },
    removeItem() {
      // this.historyList = this.historyList.filter((value, index) => index !== i);
      localStorage.removeItem("history");
      window.location.reload();
    },
  },
};
</script>

<style lang="less" scoped>
.wrap {
  width: 100%;
  height: 812px;
  background: #f5f5f5;
}

// 搜索栏
.search {
  background: #fff;
  padding-top: 14px;
  width: 100%;

  .van-search {
    width: 350px;
    height: 33px;
    margin-left: 8px;

    /deep/ .van-search__content {
      background: #f5f5f5;
    }

    ::-webkit-input-placeholder {
      font-size: 17px;
      color: #999;
    }

    // 取消按钮
    /deep/ .van-search__action {
      height: 24px;
      line-height: 24px;
      font-size: 14px;
      color: #999;
      margin-left: 18px;
      padding: 0;
    }
  }

  // 搜索选项列表
  #gameslist {
    width: 100%;
    position: fixed;
    top: 60px;
    left: 0;
    z-index: 999;
    display: none;

    li {
      height: 48px;
      background: #fff;
      font-size: 14px;
      line-height: 48px;
      text-indent: 52px;
      color: #999;
      border-bottom: 1px solid #f0ecec;
    }
  }

  // 历史浏览列表
  #historylist {
    width: 100%;

    .historysearch {
      margin-left: 10px;
      font-weight: bold;
      font-size: 16px;
    }

    .historyremove {
      margin-right: -6px;
    }

    li {
      height: 48px;
      background: #fff;
      font-size: 14px;
      line-height: 48px;
      text-indent: 6px;
      color: #000;
      border-bottom: 1px solid #f0ecec;
      position: relative;

      .van-badge__wrapper {
        margin-right: 12px;
      }

      .historyremove {
        position: absolute;
        right: 25px;
        color: #999;
      }
    }
  }
}

// 热门搜索
.hot-search {
  margin-top: 8px;
  background: #fff;
  height: 180px;

  // 标题
  h3 {
    height: 52px;
    line-height: 52px;
    font-size: 16px;
    text-indent: 16px;
  }

  // 列表
  .hot-search-list {
    li {
      float: left;
      width: 50%;
      height: 42px;
      font-size: 14px;
      text-indent: 16px;
      line-height: 42px;

      span {
        color: #34c3c6;
      }
    }
  }

  // 显示全部
  .allshow {
    height: 44px;
    line-height: 52px;
    color: #34c3c6;
    font-size: 12px;
    text-align: center;
  }
}

// 热门游戏标签
.hot-games-icon {
  height: 123px;
  margin-top: 8px;
  background: #fff;

  // 标题
  h3 {
    height: 38px;
    line-height: 38px;
    font-size: 16px;
    text-indent: 16px;
  }

  .hot-games-icon-list {
    margin-left: 10px;
    margin-right: 10px;

    li {
      float: left;
      height: 24px;
      line-height: 24px;
      margin: 4px;
      flex-shrink: 0;
      text-align: center;

      span {
        display: block;
        width: 48px;
        height: 24px;
        font-size: 12px;
        color: #999999;
        background: #f9f9f9;
        border-radius: 2px;
        border: 1px dotted #cccccc;
      }
    }
  }
}
</style>
